<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #box{
            width: 600px;
            margin: 0 auto;
            background: #ccc;
        }
        table{
            border-collapse: collapse;
            text-align: center;
        }
        td{
            height: 30px;
            line-height: 30px;
            width: 100px;
            border: 1px solid #000;
        }
        #add{
            height: 200px;
            border: 1px solid #000;
        }
        #left{
            width: 180px;
            height: 200px;
            border-right: 1px solid #000;
        }
        #left input{
            margin-bottom: 5px;
        }
        .fl{
            float: left;
        }
        .fr{
            float: right;
        }
        #right{
            width: 400px;
            padding-top: 100px;
        }
    </style>
</head>
<body>
    <div id="box">
        <table id="table">
            <tr>
                <td colspan="6">简易购物车</td>
            </tr>
            <tr>
                <td>商品名称</td>
                <td>数量（件）</td>
                <td>单价（元）</td>
                <td>运费（元）</td>
                <td>合计</td>
                <td>操作</td>
            </tr>
            <tr id="trK">
                <td colspan="6">空空如也！</td>
            </tr>
        </table>
        <div id="add">
            <div id="left" class="fl">
                名称：<input type="text">
                数量：<input type="text">
                单价：<input type="text">
                运费：<input type="text">
                <button id="addList">确认添加</button>
            </div>
            <div id="right" class="fr">
                <a href="#">请填写寄货地址</a>
                <input type="text"><button>提交订单</button>
            </div>
        </div>
    </div>
    <script>
        var table = document.getElementById("table");
        var tbody = table.children[0];
        var left = document.getElementById("left");
        var addList = document.getElementById("addList");
        var trK = document.getElementById("trK");
        addList.onclick = function(){
            // tbody.removeChild(trK);//第一次点击 删除 空空如也?
            trK.style.display = "none";
            var tr = document.createElement("tr");
            tbody.appendChild(tr);//创建一个tr 并插入tbody
            var tds = document.createDocumentFragment('fr');//创建文档碎片节点节点储存下面要遍历出的td
            for(var i=0;i<left.children.length-1;i++){
               var td = document.createElement("td");//新建td
                td.innerHTML = left.children[i].value;//td中的值为 对应leftDIV子节点input.value
                tds.appendChild(td)//td存入 文档碎片节点
            }
            tr.appendChild(tds)//td插入tr
            var td = document.createElement("td");//再创建一个td 用于显示“合计”
            // alert(tr.children[0].innerHTML)
            td.innerHTML = tr.children[1].innerHTML*tr.children[2].innerHTML+parseInt(tr.children[3].innerHTML);//计算合计值
            tr.appendChild(td);//写入tr
            var td = document.createElement("td");//再创建一个td 用于显示“操作”
            td.innerHTML = "<button onclick='del(this)'>删除</button>";//操作td中放入  删除btn
            tr.appendChild(td);//写入tr
        }
        function del(a){
            tbody.removeChild(a.parentNode.parentNode);
            if(tbody.children.length==3){
                trK.style.display = "table-row";
            }
        }
        
    </script>
</body>
</html>